import { Rate, Button } from 'antd'
import {Link} from 'react-router-dom'

import { torem } from "../../assets/js/rem"
import store from '../../store/index'

const Item = (props) => {
  const data = props.data
  const type = props.type
  const baseURL = 'https://gw.alicdn.com/tfs/'
  return (
    <div>
      {
        type === 'WellReceived' ?
          <div className="u-p-t-10 u-p-l-10">
            <div className="u-flex">
              <div onClick={video}><img style={{ width: torem(65), height: torem(90) }} src={baseURL + data.poster} alt='' /></div>
              <Link to='/details' className='u-flex u-border-bottom u-m-l-10 u-p-b-5' style={{ flex: 1 }} onClick={toDetails}>
                <div>
                  <h2 className="u-h2">{data.showName}</h2>
                  <div style={{ marginTop: '-9px' }}><Rate className='rate' disabled style={{ fontSize: torem(12) }} allowHalf defaultValue={data.remark - 5} /><span className='u-font-12' style={{ color: '#9c9c9c' }}>{data.remark}</span></div>
                  <div className='u-font-13' style={{ color: '#9c9c9c', lineHeight: torem(25), width: torem(220) }}>
                    <div>{data.highlight}</div>
                    <div className='ellipsis'>{data.leadingRole}</div>
                  </div>
                </div>
                <div>{data.openTime < '2016-12-09' ? <Button size='small' type="primary" danger ghost>购买</Button> : <Button size='small' type="primary" ghost style={{color:"rgb(55, 183, 255)",borderColor:'rgb(55, 183, 255)'}}>预售</Button>}</div>
              </Link>
            </div>
            <div className='u-flex u-border-bottom' style={{ lineHeight: torem(30), color: '#9c9c9c' }}>
              <div className='u-m-l-80 u-p-r-20 u-border-right' style={{ color: '#fea54c' }}>1212五折狂欢</div>
              <div className='ellipsis u-m-l-10' style={{ width: torem(147) }}>1212特惠抢票,名额有限抢完即止</div>
            </div>
          </div> :
          <div className="u-flex u-p-t-15 u-p-l-15">
            <div onClick={video}>
              <img style={{ width: torem(65), height: torem(90) }} src={baseURL + data.poster} alt=''/>
            </div>
            <div className='u-m-l-10' style={{width: torem(220),fontSize:torem(12),color:'#9c9c9c'}}>
              <h2 className='u-h2' style={{color:'#333',fontWeight:'normal'}}>{data.showName}</h2>
              <div style={{color:'#fea54c'}}>{data.wantCount}人想看</div>
              <div>导演：{data.director}</div>
              <div className='ellipsis'>主演：{data.leadingRole}</div>
            </div>
            <div><Button size='small' type="primary" ghost style={{color:"rgb(55, 183, 255)",borderColor:'rgb(55, 183, 255)'}}>预售</Button></div>
          </div>
      }
    </div>
  )
  function toDetails() {
    store.dispatch({type:'changeDetailStr',data:data.detailStr})
  }
  function video() {
    store.dispatch({type:'changeVideo',data:{src: data.preview[0].ipadUrl, img: `https://gw.alicdn.com/${data.poster}`}})
    props.setVideo()
  }
}

export default Item